<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Light</title>
</head>
<body>

    <center>

    <input id="l_on" type="button" value="开灯" />
    <input id="l_off" type="button" value="关灯" />
    <br />
    <input id="l_big" type="button" value="变大" />
    <input id="l_small" type="button" value="变小" />
    <br />
    <BR />
    <img id="myimg" src="../imgs/off.gif"/>

    </center>
    <script>
        var x = 0;
        var flag = confirm("Would You Want To Auto Flush?");
        if(flag)
        {
            setInterval
            (
                function()
                {
                    if(x % 2)
                        turn_on();
                    else  turn_off();
                    x ++;
                }
                ,50
            );
        }
        // function on() {
        //     document.getElementById("myimg").src='../img/on.gif';
        // }
        // function off() {
        //     document.getElementById("myimg").src='../img/off.gif';
        // }
        var turn_on = function()
        {
            document.getElementById("myimg").src = "../imgs/on.gif";
        }
        var turn_off = function()
        {
            document.getElementById("myimg").src = "../imgs/off.gif";
        }
        var turn_big = function()
        {
            document.getElementById("myimg").height = 1000;
            document.getElementById("myimg").width = 500;
        }
        var turn_small = function()
        {
            document.getElementById("myimg").height = 100;
            document.getElementById("myimg").width = 50;
        }
        document.getElementById("l_on").onclick = turn_on;
        document.getElementById("l_off").onclick = turn_off;
        document.getElementById("l_big").onclick = turn_big;
        document.getElementById("l_small").onclick = turn_small;
        document.getElementById("myimg").onmouseover = turn_on;
        document.getElementById("myimg").onmouseout = turn_off;
    </script>


</body>
</html>